<template>
  <div class="key-panel">
    <div class="panel-header">
      <div class="panel-title">
        <span class="title-icon">🔍</span>
        {{ title || '筛选' }}
      </div>
      <div class="panel-subtitle">{{ subtitle || '根据关键词快速定位需求' }}</div>
    </div>

    <a-form
        :model="formData"
        layout="inline"
        class="key-form"
    >
      <a-form-item
          v-for="(label, field) in fieldMap"
          :key="field"
          class="key-item"
          :label="label"
      >
        <a-input
            class="key-input"
            v-model:value="formData[field]"
            :placeholder="`请输入${label}关键词`"
            allow-clear
            @pressEnter="$emit('search')"
        >
        </a-input>
      </a-form-item>
      <div class="button-panel">
        <a-button type="primary" class="search-btn" @click="$emit('search')">
          <SearchOutlined />
          查询
        </a-button>
        <a-button class="reset-btn" @click="handleReset">
          <RedoOutlined />
          重置
        </a-button>
      </div>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { Form, Input, Button } from 'ant-design-vue';
import { SearchOutlined, RedoOutlined } from '@ant-design/icons-vue';
import { reactive, watch, } from 'vue';

const AForm = Form;
const AFormItem = Form.Item;
const AInput = Input;
const AButton = Button;

// 定义组件props
interface FieldMap {
  [key: string]: string;
}

interface FormData {
  [key: string]: any;
}

interface Props {
  // 字段映射：key为字段名，value为显示label
  fieldMap: FieldMap;
  // 自定义标题和副标题
  title?: string;
  subtitle?: string;
  // 外部传入的formData（可选）
  externalFormData?: FormData;
}

const props = withDefaults(defineProps<Props>(), {
  title: '筛选',
  subtitle: '根据关键词快速定位需求',
  externalFormData: () => ({})
});

// 根据fieldMap生成初始表单数据
const generateInitialFormData = (fieldMap: FieldMap): FormData => {
  const initialData: FormData = {};
  Object.keys(fieldMap).forEach(field => {
    initialData[field] = '';
  });
  return initialData;
};

// 响应式表单数据
const formData = reactive<FormData>({
  ...generateInitialFormData(props.fieldMap),
  ...props.externalFormData
});

// 监听fieldMap变化，动态更新formData
watch(() => props.fieldMap, (newFieldMap, oldFieldMap) => {
  const oldFields = Object.keys(oldFieldMap || {});
  const newFields = Object.keys(newFieldMap);

  // 移除不再存在的字段
  oldFields.forEach(field => {
    if (!newFields.includes(field)) {
      delete formData[field];
    }
  });

  // 添加新字段
  newFields.forEach(field => {
    if (!(field in formData)) {
      formData[field] = props.externalFormData?.[field] || '';
    }
  });
}, { deep: true });

// 监听外部formData变化
watch(() => props.externalFormData, (newExternalData) => {
  if (newExternalData) {
    Object.keys(formData).forEach(field => {
      if (field in newExternalData) {
        formData[field] = newExternalData[field];
      }
    });
  }
}, { deep: true });

// 重置表单
const handleReset = () => {
  Object.keys(formData).forEach(field => {
    formData[field] = '';
  });
};


// 暴露formData给父组件
defineExpose({
  formData
});
</script>

<style scoped>
.key-panel {
  background: rgba(30, 30, 30, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.key-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #0ea5e9, transparent);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  .panel-title {
    font-size: 18px;
    font-weight: 600;
    color: #f8fafc;
    display: flex;
    align-items: center;
  }

  .title-icon {
    margin-right: 10px;
    font-size: 20px;
  }

  .panel-subtitle {
    font-size: 14px;
    color: #94a3b8;
  }
}

.key-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 0;

  .key-item {
    margin-bottom: 0;
    margin-right: 20px;
    width: 23%;
    min-width: 100px;

    .key-input::v-deep(.ant-input) {
      background: transparent;
      color: #f1f5f9;
    }

    .key-input {
      border-radius: 8px;
      border: 1px solid #334155;
      background: rgba(15, 23, 42, 0.7);
      color: #f1f5f9;
      transition: all 0.3s ease;
    }

    .key-input:hover {
      border-color: #0ea5e9;
      box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
    }

    .key-input:focus {
      border-color: #0ea5e9;
      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3);
    }

    .key-input::v-deep(.ant-input)::placeholder {
      color: #64748b;
    }
  }

  .key-item :deep(.ant-form-item-label > label) {
    font-weight: 500;
    color: #e2e8f0;
  }

  .key-item ~ .button-panel {
    margin-left: auto; /* 靠右对齐 */
  }

  .button-panel {
    display: flex;
    gap: 12px;
    min-width: 23%;
    justify-content: flex-end;

    .search-btn, .reset-btn {
      border-radius: 8px;
      font-weight: 500;
      transition: all 0.3s ease;
      height: 40px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      gap: 6px;
      border: none;
      position: relative;
      overflow: hidden;
    }

    .search-btn {
      background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
      color: white;
      box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4);
    }

    .search-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: 0.5s;
    }

    .search-btn:hover::before {
      left: 100%;
    }

    .search-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(14, 165, 233, 0.6);
    }

    .reset-btn {
      border: 1px solid #475569;
      background: rgba(15, 23, 42, 0.7);
      color: #94a3b8;
    }

    .reset-btn:hover {
      border-color: #0ea5e9;
      color: #0ea5e9;
      background: rgba(14, 165, 233, 0.1);
      transform: translateY(-1px);
    }
  }
}

</style>